<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="开发环境" name="first">
        目前开发和镜像都是测试环境, 这里只是留个坑...用镜像环境的token即可...
      </el-tab-pane>
      <el-tab-pane label="镜像环境" name="second">
        <el-table :data="mirror" border fit highlight-current-row stripe>
          <el-table-column label="ID" width="100px">
            <template slot-scope="{ row }">
              {{ row.ID }}
            </template>
          </el-table-column>
          <el-table-column label="appId" width="100px">
            <template slot-scope="{ row }">
              <span @click="copy(row.appId)">{{ row.appId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="appSecret">
            <template slot-scope="{ row }">
              <span @click="copy(row.appSecret)">{{ row.appSecret }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Access Token" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span @click="copy(row.access_token)">{{ row.access_token }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="{ row }" show-overflow-tooltip>
              <el-button type="success" size="small" icon="el-icon-check" @click="getToken(row)">执行</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="生产环境" name="third">配置管理</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      activeName: 'second',
      listQuery: {
        appId: undefined,
        appSecret: undefined,
        id: undefined
      },
      list: [
        {
          title: '云平台Wiki',
          link: 'http://3ms.huawei.com/hi/group/1005981/wikis.html',
          details: {
            title: ''
          }
        }
      ],
      mirror: [
        {
          edit: false,
          appId: '101228477',
          appSecret: '5f860aa83fb1250fd185112de151f86e032a7d4b24f99f6db8c7a0ce967e556f',
          access_token: '',
          link: 'https://opene2-drcn.platform.hicloud.com/',
          details: {
            title: ''
          }
        }
      ]
    }
  },
  created() {
    // this.getAppList()
  },
  methods: {
    // async getAppList() {
    //   const users = await request({
    //     url: `/token/user/list`,
    //     method: 'get',
    //     params: { env: 'mirror' }
    //   })
    //
    //   for (const user of users) {
    //     this.mirror.push(Object.assign({}, user, {
    //       edit: false,
    //       access_token: '',
    //       scope: ''
    //     }))
    //   }
    // },
    copy(rt) {
      this.$copyText(rt).then(e => {
        this.$notify({
          title: '成功',
          message: '复制成功!',
          type: 'success'
        })
      }, e => {
        this.$notify.error({
          title: '失败',
          message: '复制RT失败!'
        })
      })
    },
    cancelEdit(row) {
      row.edit = false
    },
    getToken(row) {
      this.listQuery.appId = row.appId
      this.listQuery.appSecret = row.appSecret
      request({
        url: `/token/app`,
        method: 'get',
        params: this.listQuery
      }).then(resp => {
        console.log('===================================')
        row = Object.assign(row, resp)
        console.log(resp)
        console.log('===================================')
      })
    }
  }
}
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
